html,body{
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #0aabff;
    display: flex;
}

.water{
    position: relative;
    width: 200px;
    height: 200px;
    margin: auto;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
    box-shadow: 10px 15px 20px rgba($color: #000000, $alpha: .3),
                15px 20px 20px rgba($color: #000000, $alpha: .1),
                10px 10px 20px rgba($color: #000000, $alpha: .5) inset,
                -10px -15px 20px rgba($color: #fff, $alpha: .3) inset,
    ;
    animation: changeRadius 8s linear 0s alternate infinite;
    &::after{
        content: '';
        position: absolute;
        top: 20%;
        left: 28%;
        width: 30px;
        height: 30px;
        background-color: rgba($color: #fff, $alpha: .6);
        border-radius: 30% 70% 45% 55% / 30% 30% 70% 70% ;
        filter: blur(2px);
    }

}

@keyframes changeRadius {
    25%{
        border-radius: 30% 70% 45% 55% / 30% 30% 70% 70%;
    }
    50%{
        border-radius: 55% 45% 45% 55% / 30% 30% 70% 70% ;
    }
    75%{
        border-radius: 65% 35% 45% 55% / 30% 53% 47% 70% ;
    }
    100%{
        border-radius: 66% 34% 61% 39% / 49% 70% 30% 51% ;
    }
}